<div class="box box-solid">
    <div class="box-body table-responsive no-padding">
        <form role="form" method="post" enctype="multipart/form-data">
            <div class="nav-tabs-custom">
                       <div class="tab-content">
                <div class="tab-pane active" id="tab_1">
                    <div class="box-body">
                        <div class="form-group">
                            <label>省市列表:</label>
                            <div class="controls area_list">
                                <?php if(!empty($result)) :?>
                                    <?php foreach ($result as $key => $value) :?>
                                        <label style="margin-right:20px;">
                                            <?php echo $value['name'] ?>
                                            <input checked="checked" value="<?php echo $value['id'] ?>" name="data[<?php echo $key ?>][id]" type="hidden" />
                                            <input checked="checked" value="<?php echo $value['type'] ?>" name="data[<?php echo $key ?>][type]" type="hidden" />
                                            <a class="del_area">删除</a>
                                        </label>
                                            
                                    <?php endforeach; ?>
                                <?php endif; ?>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label>搜索省市</label>
                            <br/>
                            <label class="pull-left">
                                <input type="text"  class="form-control input-sm " id="name" style="width: 150px;margin:5px;" placeholder="省市名称"  />
                            </label>
                            <div class="input-group-btn">
                                <button class="btn btn-sm btn-primary" id="search_btn"  style="margin-top:4px">搜索<i class="fa fa-search"></i></button>
                            </div>
                            
                            <ul class="search_list">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="box-footer">
                <button class="btn btn-primary" type="submit">添加</button>
                <a href="<?php echo $this->createUrl('system/category'); ?>">返回列表</a>
            </div>
        </form>
    </div>
</div>
<style type="text/css">
    .search_list{
        list-style: none;
        margin: 0;
        margin-top: 20px;
        padding: 0;
    }
    .search_list li {
        margin: 0;
        padding: 0;
    }
    .search_list a{
        margin-left: 10px;
    }
    .area_list input{
        display: none;
        width: 0px;
    }
</style>
<script type="text/javascript">
    $(function(){
        $('#search_btn').click(function(){
            var name = $('#name').val();
            find(name);
            return false;
        });

        $('.area_list').on('click','.del_area',function(){
            $(this).parent().remove();
        });
            var len = $('.area_list label').length;
        $('.search_list').on('click','a',function(){
            var id =$(this).parent().data('id');
            var name =$(this).parent().data('name');
            var type =$(this).parent().data('type');
            $('.area_list').append('<label style="margin-right:20px;">'
                                            +name+
                                            '<input checked="checked" value="'+id+'" name="data['+len+'][id]" type="hidden" />'+
                                            '<input checked="checked" value="'+type+'" name="data['+len+'][type]" type="hidden" />'+
                                        "</label>");
            len++;
        });
    });
    function find(name)
    {

         $.ajax({
            type:"GET",
            dataType: "json",
            url: "<?php echo $this->createUrl('system/searchpc')?>",
            data:{'key':name},
            success: function(json){
                 $('.search_list').empty();
                if (json != '' && json != 0) {
                    $(json).each(function(i){
                        $('.search_list').append("<li data-id='"+json[i]['id']+"'  data-type='"+json[i]['type']+"' data-name='"+json[i]['name']+"'>"+json[i]['name']+"<a>添加</a></li>");
                    });
                }
            },
            error:function(e){

            }
        });
    }
</script>